<template>
<div style="padding: 15px">
  <vxe-toolbar>
    <template #buttons>
      <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
      <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
    </template>
  </vxe-toolbar>
  <vxe-table
    style="margin-bottom: 100px"
    resizable
    border="inner"
    ref="xTree"
    :tree-config="{children: 'children'}"
    :data="tableData">
    <vxe-table-column field="name" width="20%" title="名称" tree-node></vxe-table-column>
    <vxe-table-column field="grade" width="15%" title="等级"></vxe-table-column>
    <vxe-table-column field="sort" width="15%" title="排序"></vxe-table-column>
    <vxe-table-column width="15%" title="图标">
      <template v-slot="{ row }">
        <img :src="row.label_img" alt="" width="30">
      </template>
    </vxe-table-column>
    <vxe-table-column width="15%" title="是否允许社区添加">
      <template v-slot="{ row }">
        <span v-show="row.community_update === '0'">是</span>
        <span v-show="row.community_update === '1'">否</span>
      </template>
    </vxe-table-column>
    <vxe-table-column width="15%" title="是否为重点人群标签">
      <template v-slot="{ row }">
        <span v-show="row.label_type === '0'">否</span>
        <span v-show="row.label_type === '1'">是</span>
      </template>
    </vxe-table-column>
    <vxe-table-column width="20%" title="操作">
      <template v-slot="{ row }">
        <Button v-show="row.grade === '1'" size="small" type="primary" style="margin-right: 10px" @click="addInfo(row)">添加下级</Button>
        <Button size="small" type="info" style="margin-right: 10px" @click="updateInfo(row)">修改</Button>
        <Button v-show="row.grade === '2'" size="small" type="error" @click="deleteInfo(row)">删除</Button>
      </template>
    </vxe-table-column>
  </vxe-table>
  <Modal
    v-model="modal"
    title="编辑标签"
    @on-ok="saveFocusGroupInfo">
      <Form :model="info" :label-width="120">
        <FormItem label="上级标签">
          <Select :disabled="info.grade === '1'" v-model="info.pid">
            <Option v-for="(item,index) in labelList"  :key="index" :value="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="名称">
          <Input v-model="info.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="排序">
          <Input v-model="info.sort" type="number" placeholder="排序"></Input>
        </FormItem>
        <FormItem label="是否允许社区添加">
          <Select :disabled="info.grade === '1'" v-model="info.community_update">
            <Option value="0">是</Option>
            <Option value="1">否</Option>
          </Select>
        </FormItem>
        <FormItem label="是否为重点人群标签">
          <Select :disabled="info.grade === '1'" v-model="info.label_type">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">
            <img v-if="imgShow || info.label_img" :src="info.label_img" style="width: 50px;height: 50px;margin-bottom: 20px"/>
            <Button icon="ios-cloud-upload-outline" style="margin-bottom: 20px">上传图标</Button>
          </Upload>
        </FormItem>
      </Form>
  </Modal>
</div>
</template>

<script>
import { deleteFoucsGroup, findFocuGroupList, findLabelList, saveFoucsGroup } from '../../../api/eventlist'
import { createUpLoadFiles, getSign } from '../../../api/common'

export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      modal: false,
      info: {},
      labelList: [],
      upPicData: {
        fileName: 'label',
        filePath: 'grid/label'
      },
      imgShow: false
    }
  },
  methods: {
    init () {
      findFocuGroupList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    addInfo (e) {
      this.modal = true
      this.info = {}
      this.info.pid = e.id
      this.info.grade = (parseInt(e.grade) + 1).toString()
      this.info.id = e.id + '-' + (new Date().getTime())
    },
    updateInfo (e) {
      this.modal = true
      this.info = {}
      this.info = e
    },
    deleteInfo (e) {
      let data = {
        id: e.id
      }
      deleteFoucsGroup(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    saveFocusGroupInfo () {
      console.log(this.info)
      saveFoucsGroup(this.info).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    },
    findLabelList () {
      findLabelList().then(ret => {
        if (ret.data.errcode === 0) {
          this.labelList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    beforeUpload (file) {
      this.upPicData.fileName = 'label'
      this.upPicData.filePath = 'grid/label'
      var time = new Date().getTime()
      let timeStep = time.toString()
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.fileName = that.upPicData.fileName + timeStep + '.' + file.type.substring(6)
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      let timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let url = res.data.data.docking_url
          let params = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(url, params).then(res => {
            if (res.data.errcode === 0) {
              this.info.label_img = res.data.data
              this.imgShow = true
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.findLabelList()
  }
}
</script>

<style scoped>

</style>
